Vue 实现下拉加载更多 |
您所在的位置:网站首页 › vue el-scrollbar › Vue 实现下拉加载更多 |
Vue 实现下拉加载更多
原创
已注销 2023-03-23 00:42:00 ©著作权 文章标签 前端开发 JavaScript Vue 数据 加载 文章分类 JavaScript 前端开发 ©著作权归作者所有:来自51CTO博客作者已注销的原创作品,请联系作者获取转载授权,否则将追究法律责任熟悉Element-UI的开发者可能都会有这样的经历,它的无限滚动 InfiniteScroll 并不好用,下面介绍两种下拉加载的实现方法: 1. 使用el-table-infinite-scroll 插件1. 安装插件; npm install --save el-table-infinite-scroll2. 全局引入并注册; // main.js import elTableInfiniteScroll from 'el-table-infinite-scroll'; Vue.use(elTableInfiniteScroll);3. 局部文件引入; // 引入 import elTableInfiniteScroll from 'el-table-infinite-scroll'; export default { // 注册指令 directives: { 'el-table-infinite-scroll': elTableInfiniteScroll } }4. 使用指令; 5. 代码实例; // 引入插件 import elTableInfiniteScroll from "el-table-infinite-scroll"; export default { name: "index", data() { return { // 表格高度 tableHeight:"", // 数据总数 tableCount:0, // 表格数据列表 tableList:[], // 是否加载中 tableLoading:false, // 表格搜索条件 tableSearch:{ page:1 } } }, // 注册指令 directives: { "el-table-infinite-scroll": elTableInfiniteScroll, }, created() { let windowHeight =document.documentElement.clientHeight || document.body.clientHeight; // 动态计算表格的高度,200为屏幕内除了表格以外其他元素的高度,依实际情况而定 this.tableHeight = windowHeight - 200 + "px"; }, mounted(){ this.getTableData(this.tableSearch); }, methods: { // 请求表格数据 getTableData(search) { let page = search.page; let url = "index?page=" + page; // 首次打开页面要加载一次数据,为了防止数据过多自动触发滚动,此处需要置为加载中 this.tableLoading = true; this.$http.get(url).then((result) => { if (res.code == 10000) { // 拼接数据 this.tableList = this.tableList.concat(result.data.list); this.tableCount = result.count; this.tableSearch.page = result.current; this.tableLoading = false; } }); }, // 加载更多 loadMore() { if (!this.tableLoading) { this.tableLoading = true; if (this.tableList.length < this.tableCount) { this.tableSearch.page++; this.getTableData(this.tableSearch); } else { this.$message("已加载完所有的数据!"); this.tableLoading = false; } } }, } }; 2. 自定义下拉加载方法上面使用的插件需要依赖Element-UI,如果没有使用Element-UI,那就只能自己写一个下拉加载了,实现代码如下: export default { name: "index", data() { return { // 表格高度 tableHeight:"", // 数据总数 tableCount:0, // 表格数据列表 tableList:[], // 是否加载中 tableLoading:false, // 表格搜索条件 tableSearch:{ page:1 } }; }, created(){ let windowHeight = document.documentElement.clientHeight || document.body.clientHeight; // 动态计算表格的高度,200为屏幕内除了表格以外其他元素的高度,依实际情况而定 this.tableHeight = windowHeight - 200 +'px'; }, mounted() { this.getTableData(this.tableSearch); document.getElementById("tableBox").addEventListener('scroll',this.onTableScroll); }, beforeDestroy() { // 移除监听事件 window.removeEventListener('scroll', this.onTableScroll) }, methods: { onTableScroll(){ var obj = document.getElementById("tableBox"); var scrollHeight = obj.scrollHeight; var scrollTop = obj.scrollTop; var objHeight = obj.offsetHeight; // 100为阈值,可根据实际情况调整 if(scrollHeight { if (res.code == 10000) { // 拼接数据 this.tableList = this.tableList.concat(result.data.list); this.tableCount = result.count; this.tableSearch.page = result.current; this.tableLoading = false; } }); }, }, }; 赞 收藏 评论 分享 举报上一篇:Dart主函数、注释、变量、常量、命名规则 下一篇:Element 多个相同类型的输入框共用一条校验规则 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |